/*
* Donut V1.0.0
* Copyright 2015, Actually Digital
* Filename: donut.less
* URL: www.actuallydigital.com/donut
* Updated: 14/01/2015
* Free to use under the GNU GPL v2.0 license.
* https://tldrlegal.com/license/gnu-general-public-license-v2
*/

/* Table of contents
-----------------------
- Variables
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Variables
----------------------- */
// Breakpoints
@bp-small : 400px; //550px
@bp-med : 750px;
@bp-large : 1000px;
@bp-xl : 1200px;

// Typography
@font-family: "open sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

// Misc


/* Grid
----------------------- */
.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; 
    
    @media (min-width: 768px) {
        width: 95%;
    }
}

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box; 

    @media (min-width: 550px) {
        margin-left: 4%;
        
        &:first-child {margin-left: 0;}
        
        &.one {width: 4.66666666667%;}
        &.two {width: 13.3333333333%;}
        &.three {width: 22%;}
        &.four {width: 30.6666666667%;}
        &.five {width: 39.3333333333%;}
        &.six {width: 48%;}
        &.seven {width: 56.6666666667%;}
        &.eight {width: 65.3333333333%;}
        &.nine {width: 74.0%;}
        &.ten {width: 82.6666666667%;}
        &.eleven {width: 91.3333333333%;}
        &.twelve {width: 100%; margin-left: 0;}
        
        &.one-third {width: 30.6666666667%;}
        &.two-thirds {width: 65.3333333333%;}

        &.one-half {width: 48%;}
        
        &.offset-by-one {margin-left: 8.66666666667%;}
        &.offset-by-two {margin-left: 17.3333333333%;}
        &.offset-by-three {margin-left: 26%;}
        &.offset-by-four {margin-left: 34.6666666667%;}
        &.offset-by-five {margin-left: 43.3333333333%;}
        &.offset-by-six {margin-left: 52%;}
        &.offset-by-seven {margin-left: 60.6666666667%;}
        &.offset-by-eight {margin-left: 69.3333333333%;}
        &.offset-by-nine {margin-left: 78.0%;}
        &.offset-by-ten {margin-left: 86.6666666667%;}
        &.offset-by-eleven {margin-left: 95.3333333333%;}

        &.offset-by-one-third {margin-left: 34.6666666667%;}
        &.offset-by-two-thirds {margin-left: 69.3333333333%;}

        &.offset-by-one-half {margin-left: 52%;}
    }
}

/* Base Styles
----------------------- */
html { font-size: 62.5%; }

body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: @font-family;
    color: #222; }

/* Typography
----------------------- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300; }

h1 { 
    font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;
    
    @media (min-width:550px) {
        font-size: 5.0rem;
    }
}
h2 { 
    font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem;

    @media (min-width:550px) {
        font-size: 4.2rem;
    }
}
h3 {
    font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem;

    @media (min-width:550px) {
        font-size: 3.6rem;
    }
}
h4 {
    font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem;

    @media (min-width:550px) {
        font-size: 3.0rem;
    }
}
h5 {
    font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem;

    @media (min-width:550px) {
        font-size: 2.4rem;
    }
}
h6 {
    font-size: 1.5rem; line-height: 1.6; letter-spacing: 0;

    @media (min-width:550px) {
        font-size: 1.5rem;
    }
}

p { margin-top: 0; }

/* Links
----------------------- */
a { color: rgb(30,174,219); 
    &:hover { color: rgb(15,160,206); }
}


/* Buttons
----------------------- */
.button,
button {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: rgb(85,85,85);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid rgb(187,187,187);
    cursor: pointer;
    box-sizing: border-box; 

    &:hover,
    &:focus {
        color: #333;
        border-color: #888;
        outline: 0;
    }
    
    &.button-primary {
        color: #FFF;
        background-color: #33C3F0;
        border-color: #33C3F0;
        
        &:hover,
        &:focus {
            color: #FFF;
            background-color: #1EAEDB;
            border-color: #1EAEDB;
        }
    }
}

input {
    &[type="submit"],
    &[type="reset"],
    &[type="button"] {
        &:extend(.button all);
    }
}


/* Forms
----------------------- */
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
    height: 38px;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #fff;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box; 

    &:focus {
        border: 1px solid #33C3F0;
        outline: 0;
    }
}

/* Removes awkward default styles on some inputs for iOS */
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}

textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;}


label,
legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;}

fieldset {
    padding: 0;
    border-width: 0;}

input[type="checkbox"],
input[type="radio"] {
    display: inline;}

label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal; }

form {
    @media (min-width:400px) {
        padding: 2.5rem 2.5rem 0;
    }
}


/* Lists
----------------------- */
ul {list-style: circle inside;}

ol {list-style: decimal inside;}

ol, ul {
    padding-left: 0;
    margin-top: 0; 
    
    ul,
    ol, {
        margin: 1.5rem 0 1.5rem 3rem;
        font-size: 90%; 
    }
}

li { margin-bottom: 1rem; }

/* Code
----------------------- */
code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px; }

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;}

/* Tables
----------------------- */
th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1; 

    &:first-child { 
        padding-left: 0; 
    }
    &:last-child {
        padding-right: 0;
    }
}

/* Spacing
----------------------- */
button,
.button {margin-bottom: 1rem;}

input,
textarea,
select,
fieldset {margin-bottom: 1.5rem;}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {margin-bottom: 2.5rem;}

/* Utilities
----------------------- */
.u-full-width {
    width: 100%;
    box-sizing: border-box;}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;}

.u-pull-right {float: right;}

.u-pull-left {float: left;}

/* Misc
----------------------- */
hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;}

/* Clearing
----------------------- */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;}


/* Media Queries
----------------------- */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}
